<template>
  <commonDialog :showCancelButton="false" :showConfirmButton="false" :dialogIsShow="showDialog" dialogTitle="修改密码"
    dialogWidth="90%" confirmButtonColor="#4997fb">
    <div class="msg">{{ msg }}</div>
    <van-form @submit="submit" label-width="150">
      <van-field v-model.trim="updateForm.userName" name="用户名" label="用户名" placeholder="用户名" readonly />

      <van-field v-model.trim="updateForm.originalPassWord" type="password" name="原密码" label="原密码："
        placeholder="请输入您的密码" :rules="formRules.originalPassWord" required />

      <van-field v-model.trim="updateForm.newPassword" type="password" name="新密码" label="新密码：" placeholder="请输入您新的密码"
        :rules="formRules.newPassword" required />

      <van-field v-model.trim="updateForm.comfirmPwd" type="password" name="确认密码" label="确认密码：" placeholder="请再次输入您的新密码"
        :rules="formRules.comfirmPwd" required />

      <div class="pwd-tips">
        新密码规则：8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等
      </div>
      <div style="display: flex;margin-bottom: 20px;"> <van-button block type="info" class="submit-btn" v-if="!required"
          @click="cancel">取消</van-button>
        <van-button block type="info" native-type="submit" class="submit-btn">提交</van-button>
      </div>
    </van-form>

  </commonDialog>
</template>

<script>
import rules from "@/utils/filedRules";

import { mapGetters } from "vuex";

export default {
  name: "updatePwd",
  components: {},
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    msg: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
  },
  data() {
    const reg = /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/
    const validatorNewPwd = val => {
      return reg.test(val)
    }
    const validatorPwd = val => {
      return this.updateForm.newPassword === val
    }
    return {
      formRules: {
        originalPassWord: [{ required: true, message: '请输入原密码!', trigger: 'onBlur' }],
        newPassword: [
          {
            required: true,
            message: '请输入新密码!',
            trigger: 'onBlur'
          },
          {
            validator: validatorNewPwd,
            message: '新密码规则：8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等',
            trigger: 'onBlur'
          }
        ],
        comfirmPwd: [
          {
            required: true,
            message: '请再次输入新密码!',
            trigger: 'onBlur'
          },
          {
            validator: validatorPwd,
            message: '新密码与旧密码不一致！',
            trigger: 'onBlur'
          }
        ]
      },
      updateForm: {
        userName: "",
        originalPassWord: "",
        newPassword: "",
        comfirmPwd: "",
      },
      showDialog: true,
      loginData: {},
      captchaKey: '',
      isCodeImgStatus: false,
      loading: false,
      isSaveAccount: false,
    };
  },
  computed: { ...mapGetters(["accountAndPass"]) },
  created() {
    this.updateForm.userName = this.form.userName
    this.updateForm.originalPassWord = ''
  },
  methods: {
    submit() {
      this.$emit('submit', this.updateForm)
      console.log(this.form);
      // appointOrgCode: this.detail.assessOrganizationCode,
      //   appointOrgName: this.detail.assessOrganizationName
      // this.form.appointOrgCode = this.$route.query.appointOrgCode;
      // this.form.appointOrgName = this.$route.query.appointOrgName;
      // saveAssessAppoint(this.form).then((res) => {
      //   console.log(res);
      //   if (res.succeed) {
      //     this.$router.push("/YYPG/WDYYLB");
      //   } else {
      //     this.$toast(res.msg);
      //   }
      // });
    },
    cancel() {
      this.$emit('cancel');
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .dialogContent {
  padding: 10px 20px;
  // box-sizing: border-box;
  max-height: 80vh;
}

.msg {
  display: flex;
  align-items: center;
  line-height: 40px;
  height: 100px;
  text-indent: 2em;
  width: 100%;
  background-color: #fff4e2;
  margin-bottom: 20px;
  color: red;
  font-size: 30px;
}

/deep/.van-nav-bar .van-icon {
  font-size: 60px !important;
  color: #061226;
}

/deep/.van-cell {
  font-size: 34px;
}

/deep/.van-button {
  height: 100px;
}

/deep/.van-button--info {
  font-size: 34px;
}

/deep/input.van-field__control::-webkit-input-placeholder {
  color: #c8c9cc;
}

// .van-cell {
//   height: 100px;
//   line-height: 50px;
//   background-color: #fff !important;
//   padding: 0;

//   ::v-deep .van-field__control {
//     background-color: #fff !important;
//   }

//   /deep/ .van-field__label {
//     font-size: 30px;
//     display: flex;
//     align-items: center;
//     text-indent: 2em;
//     // justify-content: flex-end;
//   }
// }

.pwd-tips {
  text-indent: 2em;
  color: red;
  font-size: 30px;
}

.pwd-tips {
  margin-bottom: 10px;
}
</style>